<template>
  <div class="add-box">
    <el-upload
      ref="upload"
      action=""
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-change="handleChange"
      :file-list="fileList"
      :auto-upload="false"
      :accept="
        popConfig.accept ||
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel'
      "
      :limit="popConfig.limit || 1"
    >
      <el-button
        slot="trigger"
        size="small"
        type="primary"
        :disabled="fileList.length > 0"
      >
        选取文件
      </el-button>
      <el-button
        style="margin-left: 10px"
        size="small"
        type="success"
        :disabled="fileList.length == 0"
        @click="submitUpload"
        >导入文件</el-button
      >
      <div slot="tip" class="el-upload__tip">
        <span
          >{{ popConfig.tips || '只能上传xls、xlsx文件，且不超过 5MB' }}
        </span>
        <el-button v-if="!popConfig.hiddenTplBtn" type="text" @click="downTpl"
          >模板下载</el-button
        >
      </div>
    </el-upload>
  </div>
</template>

<script>
export default {
  name: 'AddUser',
  props: {
    // 弹窗数据
    popData: {
      type: Object,
      default: () => ({})
    },
    // 弹窗配置
    popConfig: {
      type: Object,
      default: () => ({})
    },
    // 弹窗取消
    close: {
      type: Boolean,
      default: false
    },
    // 弹窗确认
    confirm: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList.length)
      this.fileList = []
    },
    handlePreview(file) {
      console.log(file)
    },
    // 进度：percentage
    // status：ready uploading success fail
    handleChange(file, fileList) {
      file.status = 'ready'
      this.fileList = fileList
    },
    async submitUpload() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      if (this.fileList.length < 1) {
        this.$message({ message: '请选择文件', type: 'warning' })
        return
      }
      // form表单
      const formData = new FormData()
      const { name, raw } = this.fileList[0] || {}
      formData.append('file', raw)
      this.fileList[0].status = 'uploading'
      this.fileList[0].percentage = 0

      const config = {
        onUploadProgress: (progress) => {
          this.fileList[0].percentage = Math.floor(
            (progress.loaded / progress.total) * 100
          )
          this.fileList[0].status = 'success'
        }
      }

      try {
        const res = await this.$api.fileManage.baseUploadData(
          this.popConfig.upLoadPath,
          formData,
          config
        )
        if (Number(res.code) === 1000) {
          this.$message.success('导入成功')
          loading.close()
          this.$emit('onFinish', 'add-file', res.data, name)
        } else if (res.msg) {
          // this.$message({ type: 'error', message: res.msg })
          loading.close()
        }
      } catch (error) {
        console.log('error')
        loading.close()
      }
    },
    /**
     * 模板下载
     */
    downTpl() {
      const param = {
        tplName: this.popConfig.tplName
      }
      const downPath =
        this.popConfig.downPath || '/energy-carbon/grass-core/grassCore/tpl'
      this.$formatFile.downFileGet(downPath, param)
    }
  }
}
</script>

<style lang="scss" scoped>
.add-box {
  color: #333;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 10px;

  ::v-deep .el-upload-list {
    .el-upload-list__item-name {
      display: flex;
    }
  }
}
</style>
